<template>
  <div>
    <aside>
      <section class="main-aside-avatar">
        <img :src="asideImg" alt>
      </section>
      <ul>
        <li>
          <router-link to="/blog">博客首页</router-link>
        </li>
        <li>
          <router-link to="/edit">撰写文章</router-link>
        </li>
        <h1>{{user}}</h1>
        <li v-if="!user">
          <router-link to="/login">登录博客</router-link>
        </li>
        <li v-else  @click="logout()">
          <router-link to="/blog">登出博客</router-link>
        </li>
      </ul>
    </aside>
  </div>
</template>

<script>
import "@/assets/css/blog.css";
import asideImg from "@/assets/img/login.jpg";
import axios from "@/assets/api/axios";
export default {
  name: "blogAside",
  data() {
    return {
      asideImg: asideImg,
      session: null
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    islogin() {
      return this.$store.state.login;
    },
    user() {
      return this.session;
    }
  },
  methods: {
    logout() {
      this.$store.commit('changeLogin');
    },
    getData: function() {
      axios({
        method: 'get',
        url: '/blog/login'
      }).then((res) => {
        this.session = res.data.user;
      }).catch((err) => {
        console.log(err);
      })
    },
  }
};
</script>

